import {
	createRouter,
	createWebHistory,
} from 'vue-router';
import axios from "@/axios/index.js"


// 只要路由被读取了，这三个文件就会被加载
// import LoginPage from "../views/LoginPage.vue";
// import MainPage from "../views/MainPage.vue";
// import RegisterPage from "../views/RegisterPage.vue";

// 懒加载写法，当路由被访问时再加载
const LoginPage = () => import("@/views/LoginPage.vue")
const MainPage = () => import("@/views/MainPage.vue")
const RegisterPage = () => import("@/views/RegisterPage.vue")
const testPage = () => import("@/views/testPage.vue")

// 现在有更新的写法
// 在懒加载的基础之上，当浏览器闲下来的时候，向服务器加载一些组件，当之后使用的时候，就可以立马使用

// 路由对象
let routes = [{
	path: "/",
	name: "home",
	//重定向
	redirect: '/login',
}, {
	path: "/login",
	name: "login",
	component: LoginPage,
	// 这里相当于提供了一个存储值的地方。一个路由对应一个meta数据
	// 这里面值没有一定的用处，它的值的用处取决于你拿来干什么
	meta: {
		// 这个值用来决定这个路由是否需要登录以后才能使用
		// 表示组件的权限级别，0表示公开的，1表示登录以后不能访问的，2表示登录以后才能访问的
		power: 1,
		// 页面标题
		title: "登录",
	},
}, {
	path: "/Register",
	name: "Register",
	component: RegisterPage,
	meta: {
		power: 1,
		title: "注册",
	},
}, {
	path: "/Main",
	name: "Main",
	// 使用之前讲过的优化方案，当需要使用时，再加载模块
	component: MainPage,
	meta: {
		power: 2,
		title: "功能",
	},
},{
	path: "/Test",
	name: "Test",
	component: testPage,
	meta: {
		power: 0,
		title: "测试",
	},
}]

let router = createRouter({
	routes,
	history: createWebHistory()
})

// 导入仓库对象
import useUser from "@/store/user.js"

// 1-使用路由守卫，实现刷新页面后，重新获取用户相关数据
// 2-使用路由守卫进行鉴权，未登录的话，不能使用一些功能页面
router.beforeEach(async (to, from) => {
	// 用户信息的相关数据库
	let userData = useUser();
	// 用户的登录情况
	let onlineFlag = false;

	// 这里的ifelse嵌套，专门用来判断用户是否已经登录，是否需要重新获取用户相关信息
	// 外面的条件，检查的是用户是否已经登录  
	if (userData.user) {
		// 用户已登录，设置登录状态为真
		onlineFlag = true;
	} else {
		// 用户未登录，尝试从后端获取用户信息  
		try {
			// 里面的条件，判断的是，向后端请求之后，获得的返回，是否该用户已经登录
			let rls = await axios("/users/getState");
			// 这里是为了解决，当用户刷新页面的时候，浏览器没有存储用户相关信息的问题 
			if (rls.data.result) {
				// 更新保存用户数据，或者重新保存用户的数据
				userData.updateUserData(rls.data.data);
				// 更新完成后，设置登录状态为真
				onlineFlag = true;
			} else {
				// 处理用户未登录的情况，设置登录状态为假
				onlineFlag = false;
			}
		} catch (error) {
			// 请求失败，处理错误情况  
			console.log(error);
			onlineFlag = false;
		}
	}


	// 通过用户登录状态，和路由元信息，判断当前的路由处理方法
	// 路由分为三种情况
	// 登录以后才能访问的路由，登陆后不能访问的路由，以及任何情况下都可以访问的路由(比如网站的首页)
	switch (to.meta.power) {
		case 0:
			break;
		case 1:
			if (onlineFlag) {
				//用户登录，这个页面又不能登陆后访问
				// 跳转到功能页面
				return '/Main';
			}
			break;
		case 2:
			if (!onlineFlag) {
				//用户未登录，这个路由又需要用户登录的话
				//跳转到登录页面
				return '/login';
			}
			break;
		default:
			break;
	}

	// 将元数据的标题值赋值给文档
	document.title = to.meta.title;

	// from是被跳转的路由，也是能够获取元数据的
	// from.meta

	// 如果前面的判断没有重定向，那么就执行原本的路由
});

// 导出路由对象
export default router;